<template>
  <div id="roleManagement">
    <div class="pageHead">
      <el-input placeholder="角色名称" suffix-icon="el-icon-search" v-model.trim="listQuery.roleName" size="medium" class="roleInt" @input="queryTableData">
      </el-input>
      <!-- <el-button type="primary" round size="medium" @click="$router.push({ name: 'editRoleQx', query: { type: 'isAddJump' } })">编辑权限</el-button> -->
      <el-button type="primary" round v-if="jurisdictionControl.J_AddRole" size="medium" @click="$router.push({ name: 'roleOperation', query: { type: 'isAddJump',randomNum: Math.floor(Math.random () * 900) + 100 } })">添加</el-button>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table border :data="tableData" style="width: 100%;" height="100%" v-loading='tableLoading' size='medium' class="pageInnerTable">
          <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
          <el-table-column prop="remarks" label="备注说明" align="center">
             <template slot-scope="scope">
              <span :title="scope.row.remarks">{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="210">
            <template slot-scope="scope">
              <i class="iconfont" @click="editRole(scope.row,'clone')" title="克隆" style="font-size: 18px;position: relative;top: 2px;">&#xe8b0;</i>
              <i class="iconfont" @click="lookUser(scope.row)" title="查看用户" style="font-size: 18px;position: relative;top: 2px; margin-left: 20px;">&#xe685;</i>
              <i class="iconfont" @click="preview(scope.row)" title="预览" style="font-size: 18px;position: relative;top: 2px; margin-left: 20px;">&#xe65c;</i>
              <i class="iconfont" @click="editRole(scope.row)" title="修改" v-if="jurisdictionControl.J_EditRole" style="margin-left: 20px;">&#xe606;</i>
              <i class="iconfont" @click="delRole(scope.row)" title="删除" v-if="jurisdictionControl.J_DelRole" style="font-size: 17px;margin-left: 20px;">&#xe612;</i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination @getTableData="getUserList" :total="total" :listQuery="listQuery"></pagination>
    </div>
    <!-- 删除弹框 -->
    <delPopup @delPostConfirm="delRolePost" :delPopup="delPopup" />
    <!-- 查看用户弹窗 -->
    <look-user-dialog :lookUserDialog.sync="lookUserDialog" :roleid="roleid" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import delPopup from '@/components/delPopup';
import pagination from '@/components/pagination';
import lookUserDialog from './components/lookUserDialog.vue';
export default {
  name: 'roleManagement',
  components: {
    delPopup,
    pagination,
    lookUserDialog
  },
  data() {
    return {
      lookUserDialog: false, //控制查看用户dialog显示
      roleid: '',
      jurisdictionControl: {
        J_AddRole: false, // 新增角色
        J_EditRole: false, // 修改角色
        J_DelRole: false // 删除角色
      },
      listQuery: {
        PageIndex: 1, // 页码
        PageSize: 50, // 页数
        roleName: '' // 角色名称
      },
      delPopup: {
        title: '',
        isShow: false,
        describe: ''
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      currentRow: {}
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.common.userInfo,
      moduleId: state => state.common.moduleId
    })
  },
  methods: {
    queryTableData() {
      this.listQuery.PageIndex = 1; // 搜索把页数重置为1
      this.getUserList();
    },
    delRolePost() {
      let params = {
        roleid: this.currentRow.roleid,
        id: this.currentRow.id,
        roleName: this.currentRow.roleName
      };
      this.$api.systemManagement.GetItemEdit(params, 3).then(res => {
        if (res.data.status == 200) {
          this.getUserList();
          this.$notify({ title: '成功', message: '删除角色成功', type: 'success', duration: 1500 });
        }
        this.delPopup.isShow = false;
      });
    },
    delRole(row) {
      this.currentRow = row;
      this.delPopup = {
        title: '删除角色',
        isShow: true,
        describe: '确定删除该角色吗？'
      };
    },
    editRole(row, type) {
      if(type == 'clone') {
        this.$router.push({ name: 'roleOperation', query: { type: 'isClone', roleid: row.roleid, id: row.id, roleName: row.roleName, remarks: row.remarks, dataAuthType: row.dataAuthType, randomNum: Math.floor(Math.random() * 900) + 100 } });
      }else {
        this.$router.push({ name: 'roleOperation', query: { roleid: row.roleid, id: row.id, roleName: row.roleName, remarks: row.remarks, dataAuthType: row.dataAuthType, randomNum: Math.floor(Math.random() * 900) + 100 } });

      }
    },
    lookUser(row) { //查看用户
      this.roleid = row.roleid;
      this.lookUserDialog = true;
    },
    preview(row) {
      this.$router.push({ name: 'rolePreview', query: { roleid: row.roleid, roleName: row.roleName } });
    },
    getUserList() {
      let params = {
        ...this.listQuery
      };
      this.tableLoading = true;
      this.$api.systemManagement.GetPageList(params).then(res => {
        let resData = res.data;
        if (resData.status == 200) {
          this.tableData = resData.data.items;
          this.total = resData.data.totalCount;
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message({ message: '暂无数据', type: 'warning' });
        }
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    },
    getJurisdiction() {
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          J_AddRole: true, // 新增角色
          J_EditRole: true, // 修改角色
          J_DelRole: true // 删除角色
        };
        return;
      }
      let params = {
        id: this.moduleId
      };
      this.$api.publicApi.GetActionInfo(params).then(res => {
        let resData = res.data.data;
        resData.map(item => {
          if (item.name === '添加角色') {
            this.jurisdictionControl.J_AddRole = true;
          }
          if (item.name === '修改角色') {
            this.jurisdictionControl.J_EditRole = true;
          }
          if (item.name === '删除角色') {
            this.jurisdictionControl.J_DelRole = true;
          }
        });
      });
    }
  },
  created() {
    this.getJurisdiction();
    this.getUserList();
  },
  activated() {
    if (this.$route.query.isGetData) {
      this.getUserList();
    }
  }
};
</script>

<style lang="less">
#roleManagement {
  .pageHead {
    padding-bottom: 30px;
    .el-input {
      width: 200px;
      input {
        border-radius: 18px;
      }
    }
    .roleInt {
      margin-right: 25px;
    }
    text-align: right;
  }
  .pageMain {
    .tableContent {
      font-size: 14px;
      padding-left: 0;
      .pageInnerTable {
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
